<template>
  <div class="expt-manage-right">
    <div class="tabs">
      <div
        v-for="(item, index) in rightTabs"
        :key="item.id"
        class="tab"
        :class="{ 'active-tab': currentRightTab == index }"
        @click="rightTabClick(item, index)"
      >
        {{ item.name }}
      </div>
    </div>
    <div class="right-content">
      <div class="camp-tab">
        <div
          v-for="(item, index) in campList"
          :key="index"
          :style="{
            background: item.color,
            fontWeight: activeTab === index ? 'bold' : 'lighter',
          }"
          class="item"
          @click="campClick(item, index)"
        >
          {{ item.name }}
        </div>
      </div>

      <div class="search">
        <el-input
          v-model="entityName"
          placeholder="请输入实体名称"
          size="small"
        >
          <template #prefix>
            <el-icon class="el-input__icon">
              <search />
            </el-icon>
          </template>
        </el-input>
        <el-button @click="searchEntity">搜索</el-button>
      </div>

      <el-tree
        :current-node-key="currentNodekey"
        :data="currentTroopsList"
        :props="defaultProps"
        node-key="id"
        :default-expand-all="true"
        ref="troopsRef"
      >
        <template #default="{ node, data }">
          <!-- <i
            class="iconfont icon-wenjianjiadakaimeiwenjian"
            v-if="data.children"
          ></i>
          <span
            :id="data.id"
            class="tree-name"
            :style="{ marginLeft: data.children ? '0' : '30px' }"
            >{{ node.label }}</span
          > -->

          <span>
            <span @click="toggleChild(node)">
              <!-- 没有子级所展示的图标 -->
              <i v-if="!data.children" class=""></i>
              <!-- 展开后的图标 -->
              <!-- icon-guanbiwenjianjia1 -->
              <i
                class="iconfont icon-a-11Edakaiwenjianjia"
                v-else-if="node.expanded"
              ></i>
              <!-- 未展开的图标 -->
              <i v-else class="iconfont icon-guanbiwenjianjia"> </i>
            </span>
            <!-- =================  关键代码1-end  =================-->
            <!-- :style="{ marginLeft: data.children ? '0' : '19px' }" -->
            <span :class="{ 'custom-tree-node': !data.children }">{{
              node.label
            }}</span>
          </span>
        </template>
      </el-tree>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted, onUnmounted, inject, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import { Search } from "@element-plus/icons-vue";
import { ElMessage, ElMessageBox } from "element-plus";
const props = defineProps({
  currentTroopsList: {
    type: Object,
    default: () => {
      return {};
    },
  },
  campList: {
    type: Array,
    default: () => {
      return [];
    },
  },
});
let emit = defineEmits(["campTabClick"]);
// 右侧切换
const rightTabs = [
  {
    name: "实验信息",
    id: 0,
  },
  {
    name: "实验成果",
    id: 1,
  },
];
const currentRightTab = ref(0);
const rightTabClick = (item, index) => {
  currentRightTab.value = index;
};
// 阵营列表
const activeTab = ref(0);

const campClick = (item, index) => {
  activeTab.value = index;
  emit("campTabClick", item);
  //   currentIndex.value = findindex(props.exptForm.campList, activeTab.value);
};
const currentNodekey = ref(null);
const defaultProps = {
  label: "name",
  children: "children",
};
const troopsRef = ref(null);

// 搜索
const entityName = ref("");

function tree(data, name) {
  for (let i = 0; i < data.length; i++) {
    let item = data[i];

    if (item.name == name) {
      return item;
    } else {
      // item.children 不等于 undefined && item.children.length 大于 0 时
      if (item.children && item.children.length > 0) {
        let res = tree(item.children, name);

        // 当 res = undefined 时不会进入判断中
        // 也就是不会return
        if (res) return res;
      }
    }
  }
}
const searchEntity = () => {
  let t = tree(troopsList.value, entityName.value);
  if (t) {
    currentNodekey.value = t.id;
    let node = document.getElementById(t.id);
    node.scrollIntoView();
  } else {
    ElMessage({
      showClose: true,
      message: "请输入正确的任务名称",
      type: "error",
    });
  }
};

onMounted(() => {});
</script>
<style scoped lang="scss">
.expt-manage-right {
  width: 20%;

  box-sizing: border-box;
  background: #4a4a4a;
  height: 100%;
  cursor: pointer;
  border: 1px solid blue;
  .tabs {
    height: 30px;
    display: flex;

    .tab {
      width: 100px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      background: #6c6c6c;
      margin-right: 1px;
    }

    .active-tab {
      background: #2698c8;
    }
  }
  .right-content {
    height: calc(100% - 30px);

    .camp-tab {
      padding: 0 5px;
      height: 50px;
      display: flex;
      align-items: center;
      overflow: hidden;
      overflow-x: auto;
      width: 98%;
      color: #000;

      .item {
        flex-shrink: 0;
        width: 80px;
        height: 26px;
        line-height: 26px;
        text-align: center;
        font-weight: lighter;
      }
    }
    .search {
      height: 50px;
      line-height: 50px;

      .el-input {
        width: 140px;
        margin-left: 10px;
      }

      :deep() {
        .el-input__wrapper {
          background: #051113 !important;
          border: 1px solid #007897;
          border-radius: 0 !important;
          box-shadow: none;
          box-sizing: border-box;

          height: 24px;

          .el-input__inner {
            color: #fff;
          }

          .el-icon {
            color: #fff;
          }
        }

        .el-button {
          border-radius: 0 !important;
          background: #007897;
          border: none;
          color: #fff;

          height: 24px;
        }
      }
    }
    .custom-tree-node {
      margin-left: 21px;
    }
    .iconfont {
      margin-right: 5px;
      color: #5099a7;
    }
  }
}
:deep() {
  .el-tabs {
    width: 100%;
    height: 44px;

    overflow: hidden;
  }
  .el-tabs__item {
    color: #fff;
    border: none;
    box-shadow: none;
  }
  .is-active {
    color: red;
  }
  .el-tree {
    background: transparent;
    width: 100%;
    height: calc(100% - 100px);
    overflow-y: auto;
    padding: 0 10px;
    color: #fff;
  }
  .el-tree-node.is-current > .el-tree-node__content {
    background-color: #2c4c60 !important;
  }

  .el-tree-node:focus > .el-tree-node__content {
    background-color: transparent;
  }

  .el-tree-node__content {
    &:hover {
      background-color: #2c4c60;
    }
  }
}

:deep(.el-tree-node__content > .el-tree-node__expand-icon) {
  position: absolute;
  opacity: 0;
}
</style>

<style lang="scss" scoped>
::-webkit-scrollbar {
  width: 10px;
  height: 15px;
}

/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track {
  border-radius: 10px;

  background: red;
}

/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px #00daffa3;
  background-color: red;
}
::-webkit-scrollbar {
  height: 8px;
}

/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track {
  border-radius: 10px;

  background: rgba(40, 123, 129, 0.23);
}

/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px #00daffa3;
  background-color: #00daffa3;
}
</style>
